/**
 *  动画
 */

/************** Vue <transition>组件动画 ***************/

.fade {
  &-enter-active,
  &-leave-active {
    transition: all 0.2s;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
}

// fade-in 渐隐
.fade-in {
  &-enter-active,
  &-leave-active {
    transition: all 0.5s;
  }

  &-enter-from {
    opacity: 0;
    transform: translateX(-20px);
  }
  &-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }
}

// fade-absolute-in 浮动渐隐
.fade-absolute-in {
  &-enter-active,
  &-leave-active {
    position: absolute;
    transition: all 0.5s;
  }

  &-enter-from {
    opacity: 0;
    transform: translateX(-20px);
  }
  &-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }
}

// spread-in 扩散渐隐
.spread-in {
  &-enter-active,
  &-leave-active {
    transition: all 0.3s;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: scale(1.03);
  }
}

// spread - 扩散渐隐
.spread-in-enter-active,
.spread-in-leave-active {
  transition: all 0.3s ease-out;
}

.spread-in-from,
.spread-in-leave-to {
  opacity: 0;
  transform: scale(1.03);
}

// 用在了左侧导航
.fade-left {
  &-move,
  &-enter-active,
  &-leave-active {
    z-index: 99;
    transition: all 0.5s;
    overflow: hidden;
  }

  &-leave-active {
    position: absolute;
  }

  &-enter-from {
    opacity: 0;
    transform: translateX(-20px);
  }
  &-leave-to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

// fade-absolute-in 浮动渐隐
.collapse-fade-absolute-in {
  &-enter-active,
  &-leave-active {
    position: absolute;
    transition: all 0.5s;
  }

  &-enter-from {
    opacity: 0;
    transform: translateX(-355px);
  }
  &-leave-to {
    opacity: 0;
    transform: translateX(-355px);
  }
}

/************** Css动画 ***************/

//上划出
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

//上下循环跳动
@keyframes upAndDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

// 抽屉抽出
.contentTransfer {
  &-enter-active,
  &-leave-active {
    transition: all 0.5s;
  }

  &-enter-from {
    transform: translateX(100%);
  }
  &-leave-to {
    opacity: 0;
    transform: translateX(100%);
  }
}
